<script>
import { isArray, isString } from "is-type-data";
export default {
  name: "AegleCheckbox",
  props: {
    schema: {
      type: Object,
      default: null,
    },
  },
  render() {
    const clazz = ["aegle-checkbox"];
    if (isString(this.schema.class)) {
      clazz.push(this.schema.class);
    } else if (isArray(this.schema.class)) {
      clazz = [...clazz, this.schema.class];
    }
    if (this.schema) {
      const Options = this.schema.options.map((item) => {
        return <el-checkbox label={item.value}>{item.label}</el-checkbox>;
      });
      const Comp = (
        <el-checkbox-group
          class={clazz}
          style={{ ...this.schema.style }}
          v-model={this.schema.value}
        >
          {Options}
        </el-checkbox-group>
      );
      return Comp;
    }
  },
};
</script>
<style lang="scss" scoped>
.aegle-checkbox {
  display: inline-block;
}

::v-deep .el-checkbox {
  margin-right: 8px;
  .el-checkbox__label {
    padding-left: 8px;
  }
}
</style>